<template>
  <div ref="floor1Swiper" class="swiper-container">
    <div class="swiper-wrapper">
      <div v-for="carousel in carouselList" :key="carousel.id" class="swiper-slide">
        <img v-lazy="carousel.pic" alt="" :title="carousel.name" @click="handleClick(carousel.id)">
        <!--        <img v-lazy="'https://www.enjoy-jp.cn/zb_users/upload/2021/10/202110151634264702853216.jpg'" alt="">-->
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" />

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev" />
    <div class="swiper-button-next" />
  </div>
</template>

<script>
// 引swiper包
import Swiper from 'swiper'

export default {
  name: 'Carousel',
  props: {
    'carouselList': {
      type: Array,
      default() {
        return []
      }
    },
    'routerPrefix': {
      type: String,
      default() {
        return undefined
      }
    }
  },
  watch: {
    carouselList: {
      // 保持写法与ListContainer一致，便于拆分组件
      immediate: true, // 上来就监听一次，不管数据变化与否
      handler() {
        this.$nextTick(() => {
          new Swiper(this.$refs.floor1Swiper, {
            loop: false, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            // 如果需要自动播放
            autoplay: {
              stopOnLastSlide: false
            }
          })
        })
      }
    }
  },
  methods: {
    handleClick(id) {
      if (this.routerPrefix !== undefined) {
        this.$router.push({ path: this.routerPrefix + '?id=' + id })
      }
    }
  }
}
</script>

<style scoped>
img {
  position: relative;
  width: 80%;
  height: 80%;
}

</style>
